<template>
  <div class="company-chart pad">
    <el-page-header class="page-header" @back="goBack" :content="title">
    </el-page-header>
    <div class="head">
      <span>设置机构量表({{name}})</span>
    </div>
    <div style="display: flex; justify-content: space-between;" class="m-t-b">
      <div>
        <el-input
          style="width: 400px;"
          v-model="searchText"
          placeholder="输入量表名称搜索"
        />
        <el-button type="primary" style="margin-left: 10px;">
          <i class="el-icon search"></i>
          搜索
        </el-button>
      </div>
      <el-button type="primary" @click="openAddChartDialog">
        <i class="el-icon-plus"></i>
        添加量表
      </el-button>
    </div>
    <el-table
      class="m-t-b"
      :data="companyChartList"
      stripe
      border
      v-loading="loading"
    >
      <el-table-column label="量表名称" prop="psychologyTitle"></el-table-column>
      <el-table-column label="是否在客户端显示测评结果">
        <template slot-scope="scope">
          {{scope.row.resultStatus ? '是' : '否'}}
          <el-switch
            v-model= 'scope.row.isShowStatus'
            @change = 'isShowResult(scope.row)'
            active-color="#13ce66"
            style="margin-left:30px"
            inactive-color="#ff4949">
          </el-switch>

        </template>
      
      </el-table-column>
      <el-table-column label="是否是推荐量表">
        <template slot-scope="scope">
          {{scope.row.recommendType ? '是' : '否'}}

          <el-switch
            v-model= 'scope.row.isRecommenReport'
            @change = 'isRecommenReport(scope.row)'
            active-color="#13ce66"
            style="margin-left:30px"
            inactive-color="#ff4949">
          </el-switch>

        </template>
      </el-table-column>


      <el-table-column label="是否启用量表">
        <template slot-scope="scope">
          {{scope.row.enable ? '启用' : '禁用'}}

          <el-switch
            v-model= 'scope.row.isUse'
            @change = 'useReport(scope.row)'
            active-color="#13ce66"
            style="margin-left:30px"
            inactive-color="#ff4949">
          </el-switch>

        </template>
      </el-table-column>


      <el-table-column label="创建时间" prop="createDate"></el-table-column>
    </el-table>
    <el-pagination
      class="flex m-t-b"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>


    <el-dialog title="设置量表" :visible.sync="showChartDialog">
      <el-form :model="cusChart" label-position="top" ref="chart" :rules="rules">
        <el-form-item label="选择量表" prop="psychologyTitleId">
          <el-select v-model="cusChart.psychologyTitleId" filterable>
            <el-option
              v-for="item in chartList"
              :key="item.psychologyTitleId"
              :value="item.psychologyTitleId"
              :label="item.psychologyTitle"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否在客户端显示测评结果">
          <el-radio-group v-model="cusChart.resultStatus">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否设置为推荐">
          <el-radio-group v-model="cusChart.recommendType">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="confirmSetChart" :loading="addLoading">保存</el-button>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAllMentalChart,
  recommendType
} from '../api';
import {
  getCompanyChart,
  setCompanyChart,
  getShowStatus
} from '../api/version2';
import {
  formatDate
} from '../util';
export default {
  name: 'CompanyChart',
  props: ['id', 'name'],
  data () {
    return {
      // isShowStatus: true,
      // isShowRecommenReport: true,
      title: '',
      showChartDialog: false,
      companyChartList: [],
      total: 0,
      searchText: '',
      chartList: [],
      pageSize: 10,
      addLoading: false,
      loading: false,
      cusChart: {
        schoolId: '',
        psychologyTitleId: '',
        resultStatus: 1,
        recommendType: 0
      },
      rules: {
        psychologyTitleId: [
          { required: true, message: '请选择量表', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    fetchMentalList () { // 查询心理量表
      getAllMentalChart()
      .then(res => {
        // console.log(res);
        let list = res.data.data || [];
        this.chartList = list
      })
      .catch(e => {})
    },
    confirmSetChart () { // 设置量表
      this.$refs.chart.validate(valid => {
        if (valid) {
          this.addLoading = true;
          setCompanyChart(this.cusChart)
          .then(res => {
            this.fetchCompanyChart(1);
            this.$message.success('添加成功');
            this.showChartDialog = false;
            this.addLoading = false
          })
          .catch(e => {
            this.addLoading = false
          })
        } else {
          return false
        }
      })
    },
    handlePagi (page) { // 分页事件
      this.fetchCompanyChart(page)
    },
    fetchCompanyChart (index) { // 查询机构量表
      this.loading = true;
      getCompanyChart({
        index,
        count: this.pageSize,
        queryParam: {
          schoolId: this.id
        }
      })
      .then(res => {
        // console.log(res);
        this.loading = false;
        let list = res.data.data.list || [];
        // console.log(list);
        list.forEach(item => {
          item.createDate = formatDate(item.createDate, 'zh:');
          item.isShowStatus = Boolean(item.resultStatus);
          item.isRecommenReport = Boolean(item.recommendType);
          item.isUse = Boolean(item.enable);
        });
        this.total = res.data.data.totalRecord;
        this.companyChartList = list
        console.log(list);
      })
      .catch(e => {
        this.loading = false
      })
    },
    // 
    isShowResult (row) {
      // console.log(row);
      // console.log(row.schoolPsychologyId);
      // console.log(row.resultStatus);
      getShowStatus({
        schoolPsychologyId: row.schoolPsychologyId.toString(),
        resultStatus: row.resultStatus.toString(),
      }).then(res => {
        // console.log(res);
        if(res.data.code == 1){
          this.fetchCompanyChart(1);
          if(row.isShowStatus == true) {
            this.$message.success("您已修改为显示状态");
          } else if (row.isShowStatus == false) {
            this.$message.warning("您已修改为不显示状态");
          }
        }
      })
    },
    // 
    isRecommenReport (row) {
      // console.log(row);
      // console.log(row.schoolPsychologyId);
      // console.log(row.recommendType);
      getShowStatus({
        schoolPsychologyId: row.schoolPsychologyId.toString(),
        recommendType: row.recommendType.toString(),
      }).then(res => {
        // console.log(res);
        if(res.data.code == 1){
          this.fetchCompanyChart(1);
          if(row.isRecommenReport == true) {
            this.$message.success("您已修改为推荐状态");
          } else if (row.isRecommenReport == false) {
             this.$message.warning("您已修改为不推荐状态");
          }
        }
      })
    },

    // 是否启用量表
    useReport(row) {
      // console.log(row);
      getShowStatus({
        schoolPsychologyId: row.schoolPsychologyId.toString(),
        enable: row.enable.toString(),
      }).then(res => {
        console.log(res);
        if(res.data.code == 1) {
          this.fetchCompanyChart(1);
          if(row.isUse == true) {
            this.$message.success("您已启用量表");
          } else if (row.isUse == false) {
            this.$message.warning("您已禁用量表");
          }
        }
      })
    },


    openAddChartDialog () { // 打开添加量表
      this.showChartDialog = true
    },
    goBack () {
      history.back()
    },
  },
  created () {
    let path = this.$route.meta.path;
    this.title = path[path.length - 1];
    this.cusChart.schoolId = this.id;
    this.fetchMentalList();
    this.fetchCompanyChart(1)
  },
}
</script>
<style lang="scss">

</style>
